473,418 Members | 2,049 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,418 software developers and data experts.

CSS vertical pop-down menu ...sub-menu drop down problem

Hello Experts,

Im trying to design a CSS vertical drop down menu which should have the
following functionality.
Home
About Us
|
-->Overview
Management
Partners
FAQ's
Careers
Contact
Knowledge Center(Sub Menu)
|
-> Documents
Multimedia Center
Services
|
-->Overview (Sub Menu)
Mist Mail
Mist Chat
Mist Voice
Mist BPO
Operations
|
-->Overview
Facilities
Hiring
Training
Quality
Product Mgmt
Client Mgmt
|
-->Reporting (Sub Menu)
Scalability Mgmt
Implementation
Technology
|
-->Overview
Mist Voice
Mist Network
Mist Software
|
-->Workforce Mgmt (Sub Menu)
Quality Assurance
Training
Reporting
Knowledge Mgmt
Silent Monitoring Rec
News & Events
Tour Mist
Client Mist
Im using the hover element to get the mouse over effect.On the whole
the main menu is working properly i.e if I move my mouse over the menu
item areas like "About US" ,"Operations" then the pop-down menus open
up but the problem is even the submenus are also opening up i.e if I
select "Operations" from the main menu list then along with the
drop-down list of Operations even the sub-menu "Client Mgmt" drop-down
list is also opening up.

I want the sub-menus should open up only when the user moves his
mouse over that area.

You can have the look at the semi-finished menu for complete
understanding....plz click on the following link

http://www.strokefx.com/v-simplemenu3.html
Note:Open the file in "Firefox" or "Mozilla" or "Opera" browsers,
this particular menu does'nt work in IE browser(IE does not support
'hover' element of CSS)

Kindly help me out .....plz tell me wot all changes to the above code
have to be made to stop the sub-menus from opening up ...

Thanks in advance!

Swiftguy

The source code of the my menu file is as follows
----------------------------------------------------------

<html>
<head>
<style>
body { font-family: Verdana;font-size:12px; }

div.mainmenu {
position: absolute;
left: 0px;
top: 0px;
font-weight: bold;
z-index: 1;
}

div.menu {
float: bottom;
margin-left: 10px;
}

div.popup a:hover { background-color: #ffa; }
div.menu:hover div:first-child { border-bottom: none; }
div.menu div.popup { display: none; }
div.menu:hover div.popup {
display: block;
background-color: #99f;
<!-- background-color: red; -->
}
div.menu div {
width: 175px;
background-color: #66f;
padding: 5px;
border: solid 2px blue;
margin-left:2px;
}
div.menu2 {
width: 175px;
background-color: #66f;
padding: 5px;
border: solid 2px blue;
margin-left:2px;
}
div.popup div, div.popup a { display:block; text-decoration: none;
margin: 2px 4px 2px -7px; }
div.popup div + div, div.popup a + a { margin-top: 10px;margin-left:1;
}

div.content {
position: absolute;
left: 20px;
top: 195px;
border: 1px dashed gray;
}

</style>
</head>

<body>

<div class="mainmenu" id="mainmenu">
<div class="menu">
<div>Home</div>
</div>

<div class="menu">
<div>About US </div>
<div class="popup">
<a href="#">Overview</a>
<a href="#">Management</a>
<a href="#">Partners</a>
<a href="#">FAQ's</a>
<a href="#">Careers</a>
<a href="#">Contact</a>
<div class="popup">
<div>Knowledge Centre(submenu)</div>
<a href="#">Documents</a>
<a href="#">Multimedia Center</a>
<!--</div> -->
</div>
</div>
</div>

<div class="menu">
<div>Services</div>
<div class="popup">
<a href="#">Overview</a>
<a href="#">Knoah Mail</a>
<a href="#">Knoah Chat</a>
<a href="#">Knoah Voice</a>
<a href="#">Knoah BPO</a>

</div>
</div>

<div class="menu">
<div>Operations </div>
<div class="popup">
<a href="#">Overview</a>
<a href="#">Facilities</a>
<a href="#">Hiring</a>
<a href="#">Training</a>
<a href="#">Quality</a>
<a href="#">Product Mgmt</a>
<div class="popup">
<div> Client Mgmt (submenu)</div>
<a href="#">Reporting</a>
<a href="#">Scalability Mgmt</a>
<a href="#">Implementation</a>
<!-- </div> -->
</div>
</div>
</div>

<div class="menu">
<div>Technology</div>
<div class="popup">
<a href="#">Overview</a>
<a href="#">Knoah Voice</a>
<a href="#">Knoah Network</a>
<div class="popup">
<div> Knoah Software (submenu) </div>

<a href="#">Workforce Mgmt</a>
<a href="#">Quality Assurance</a>
<a href="#">Training</a>
<a href="#">Reporting</a>
<a href="#">Knowledge Mgmt</a>
<a href="#">Silent Monitoring Rec.</a>
<!-- </div> -->
</div>
</div>
</div>

<div class="menu">
<div>News & Events</div>
</div>

<div class="menu">
<div>Tour Knoah</div>
</div>

<div class="menu">
<div>Client Gateway</div>
</div>
</div>

</body>
</html>

Jul 21 '05 #1
0 16138

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: kAldam | last post by:
I am currently using IE 6.0 and 5.5 and the scenario is the following. I have a span that contains text, and the span is beign contained by a table cell (this is the way thing need to be in my...
8
by: abracad | last post by:
Hi Is it possible to vertically align an image in the middle of a DIV of fixed height?
1
by: Kenneth | last post by:
Okay, I've been scouring Google for hours looking for a solution to this problem, but as of yet I can't find one. XHTML Transitional seems to specify that I can no longer set a table's height to...
10
by: John Baker | last post by:
Hi: I have a user who has labels that are set up 3 across and 11 vertical (which is unusual at best), and he wants me to print names and addresses on them. I have already set up for labels 10...
0
by: GiladP1 | last post by:
Hi, I am trying to create a vertical label or a vertical text box by useing their 'Vertical' property. But the text just disapears. I can manage to get right-to-left text to be vertical but...
2
by: Eric Lindsay | last post by:
If I want to have the middle of an image vertically aligned with the middle of a heading (or several lines of heading), is there some particular way people would recommend? vertical-align: center...
4
by: shivas | last post by:
Hi, I am using vertical-align for a table row, but the Image and the text are not aligned properly. I don't what to align image in the img tag, rather in the row itself I want to align. I want...
5
by: Markus Ernst | last post by:
Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up...
3
by: Spiros Bousbouras | last post by:
The fact that vertical tab and form feed exist both in the basic source character set and the basic execution character set suggests to me that there is a class of display devices where vertical...
40
by: maya | last post by:
hi, how do I get text to vertical-align inside a div? http://www.mayacove.com/misc/home.html vertical-align should work, according to this:...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.